<template>
	<view class="content">
		<view class="header" @tap="upload">
			<text>头像</text>
			<image :src="user.imgUrl" mode="aspectFit"></image>
		</view>
		<view class="item" @tap="setNickName">
			<text>昵称</text>
			<view>
				<text class="detail">{{ user.nickName }}</text>
				<image src="../../static/images/right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="item" @tap="setDescription">
			<text>个性签名</text>
			<view>
				<text class="detail">{{ user.description }}</text>
				<image src="../../static/images/right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="item" @tap="setVerCode()">
			<text>手机号</text>
			<view>
				<text  v-if="user.phone==null||user.phone.length==0" style="color:red" class="detail">未绑定</text>
				<text  v-else class="detail">{{user.phone}}</text>
				<image src="../../static/images/right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="item">
			<text>真实姓名</text>
			<text class="no-change">{{ user.realName }}</text>
		</view>
		<view class="item">
			<text>学院</text>
			<text class="no-change">{{ user.college }}</text>
		</view>
		<view class="item">
			<text>专业班级</text>
			<text class="no-change">{{ user.className }}</text>
		</view>
		<view class="logout" @tap="logout()">注 销</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js"
	export default {
		computed:{
			...mapState(['user'])
		},
		methods: {
			...mapMutations(['out']),
			upload() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						const src = res.tempFilePaths[0];
						if (src.indexOf(".ico") != -1) {
							utils.errorToast('不支持 ico 的图标文件');
						} else {
							uni.navigateTo({
								url: '../upload/upload?src=' + src
							});
						}
					}
				});
			},
			logout() {
				try {
					this.out();
					uni.removeStorageSync("token");
					uni.reLaunch({
						url:"../login/login"
					})

				} catch (e) {
					utils.errorToast("内部错误");
				}
			},
			setDescription() {
				uni.navigateTo({
					url: "../settingdescription/settingdescription?description=" + this.user.description
				})
			},
			setNickName() {
				uni.navigateTo({
					url: "../setnickname/setnickname?nickName=" + this.user.nickName
				})
			},
			setVerCode() {
				uni.navigateTo({
					url: "../verificationcode/verificationcode?phone="+this.user.phone
				})
			}

		}
	};
</script>

<style>
	page {
		background-color: #f4f4f4;
		font-size: 35upx;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		width: 92%;
		height: 180upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		background-color: #ffffff;
		/* border-bottom: 1upx solid #dcdcdc; */
		box-shadow: inset 0px -1px 1px -1px #c8c7cc;
	}

	.header image {
		width: 150upx;
		height: 150upx;
		border-radius: 10upx;
	}

	.item {
		width: 92%;
		height: 130upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 4%;
		background-color: #ffffff;
		box-shadow: inset 0px -1px 1px -1px #c8c7cc;
	}

	.item view {
		display: flex;
		color: #666;
		align-items: center;
		height: 100upx;
		width: 70%;
		justify-content: flex-end;
	}

	.item view image {
		width: 40upx;
		height: 40upx;
		margin-left: 7upx;
	}

	.detail {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 80%;
		text-align: right;
	}

	.no-change {
		margin-right: 40upx;
		color: #666;
	}

	.logout {
		width: 100%;
		height: 120upx;
		background: #ffffff;
		line-height: 120upx;
		text-align: center;
		color: #ff0000;
		margin-top: 40upx;
		font-size: 38upx;
	}
</style>
